<template>
  <card class="insure-card" title="借调记录" :showDivider="false">
    <table-index :table="table" @loadData="loadData">
      <template #carInfo="{ record }">
        <div>{{ record.licenseNo }}</div>
        <div>{{ record.modelName }}</div>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getCarTransferList } from '@/api/asset/carTransfer'

  import { useRoute } from 'vue-router'
  const queryParam = reactive({})
  const route = useRoute()
  const table = useTable({
    columns: [
      { title: '调车单号', dataIndex: 'code' },
      { title: '车辆信息', slotName: 'carInfo' },
      { title: '归属门店', dataIndex: 'siteName' },
      { title: '借调类型', dataIndex: 'typeName' },
      { title: '借调开始时间', dataIndex: 'startTime', width: 180 },
      { title: '借调结束时间', dataIndex: 'endTime', width: 180 },
      { title: '租期', dataIndex: 'rentDays', width: 130 },
      { title: '借调公司', dataIndex: 'sourceName' },
      { title: '借调费', dataIndex: 'amount' },
      { title: '借调状态', dataIndex: 'statusName' },
      { title: '创建人', dataIndex: 'createUserName' },
      { title: '操作时间', dataIndex: 'createTime', width: 180 },
    ],
    tableLoading: false,
  })

  const loadData = useFetchTableDataApi(table, queryParam, getCarTransferList)

  onMounted(() => {
    if (route.params) {
      queryParam.carId = route.query.carId
      if (queryParam.carId) {
        loadData()
      }
    }
  })
</script>
<style scoped lang="less"></style>
